<template>
  <div class="grid-work">
    <split-line text="网格工作" />
    <echatrs-elem :option="option" :components="[deepComponents]" style="height: 230px"></echatrs-elem>
  </div>
</template>

<script>
import EchatrsElem from '@gis/lib/components/charts/echatrs-elem';
import { DataZoomComponent } from 'echarts/components';
import SplitLine from '@/components/split-line.vue';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
export default {
  name: 'grid-work',
  components: { SplitLine, EchatrsElem },
  data() {
    return {
      deepComponents: [DataZoomComponent],
      legend: [],
      xDataList: [],
      yDataList: [],
    };
  },
  computed: {
    areaCode() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
    option() {
      return {
        tooltip: {
          trigger: 'axis',
        },
        color: ['#D6D8DB', '#1F7DF6', '#28A589', '#FCB615', '#ED4E1D'],
        legend: {
          icon: 'diamond',
          left: 0,
          textStyle: {
            color: '#fff',
            fontSize: '12px',
          },
          itemWidth: 9,
          itemHeight: 9,
          data: this.legend,
        },
        grid: {
          left: '18%',
          right: '0%',
          bottom: '0%',
          top: '12%',
          // containLabel: true,
        },
        dataZoom:
          this.xDataList.length <= 8
            ? []
            : [
                {
                  type: 'slider',
                  show: true,
                  yAxisIndex: [0],
                  left: '98%',
                  right: '2%', //右边的距离
                  start: 100, //数据窗口范围的起始百分比
                  end: 60,
                },
                {
                  type: 'inside',
                  yAxisIndex: [0],
                  start: 0,
                  end: 60,
                },
              ],
        xAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLabel: {
            color: '#fff',
          },
        },
        yAxis: {
          type: 'category',
          minInterval: 1,
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#fff',
          },
          data: this.xDataList,
        },
        series: this.yDataList,
      };
    },
  },
  watch: {
    areaCode: {
      immediate: true,
      handler() {
        this.getGridWorkCountAsync();
      },
    },
  },
  created() {
    this.getGridWorkCountAsync();
  },
  methods: {
    async getGridWorkCountAsync() {
      const params = {
        area_code: this.areaCode,
      };
      if (!params.area_code) {
        return;
      }
      const res = await this.$axios.get('/xw-microservice/xw-analysis/v3/event/count/getGridWork', {
        params: Object.assign({}, params),
      });
      if (res.code === 200) {
        const data = res.data || {};
        const legend = [];
        const xDataList = [];
        const yDataList = [];

        Object.keys(data).forEach((key, index) => {
          legend.push(key);
          let dt = [];
          data[key].forEach((item) => {
            if (index === 0) {
              xDataList.push(item.name);
            }
            dt.push(item.value);
          });
          yDataList.push({
            name: key,
            type: 'bar',
            stack: 'total',
            label: { show: true },
            emphasis: { focus: 'series' },
            data: dt,
          });
        });

        this.legend = legend;
        this.xDataList = xDataList;
        this.yDataList = yDataList;

        // {
        //   name: "信息更新",
        //     type: "bar",
        //   stack: "total",
        //   label: {
        //   show: true,
        // },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [820, 832, 901, 934, 1290, 1330],
        // },
      } else {
        console.error('请求网格工作统计失败：' + res.msg);
      }
    },
  },
};
</script>

<style scoped lang="less">
.grid-work {
}
</style>
